<template>
  <div class="wallet-wrapper">
    <!-- 增强型Header -->
    <header class="enhanced-header">
      <div class="header-left" @click="back">
        <i class="fa fa-angle-left"></i>
        <span class="back-text">返回</span>
      </div>
      <h1 class="header-title">我的钱包</h1>
    </header>

    <!-- 主体内容 -->
    <main class="wallet-main">
      <!-- 余额展示卡片 -->
      <div class="balance-card">
        <div class="balance-label">可用余额</div>
        <div class="balance-amount">
          <span class="currency">¥</span>
          <span class="amount">{{ formattedBalance }}</span>
        </div>
      </div>

      <!-- 核心操作按钮 -->
      <div class="action-grid">
        <button class="action-btn deposit" @click="showDepositDialog = true">
          <i class="fas fa-coins"></i>
          <span>充值</span>
        </button>
        <button class="action-btn withdraw" @click="showWithdrawDialog = true">
          <i class="fas fa-wallet"></i>
          <span>提现</span>
        </button>
        <button class="action-btn transfer" @click="showTransferDialog = true">
          <i class="fas fa-exchange-alt"></i>
          <span>转账</span>
        </button>
      </div>



      <!-- 充值弹窗 -->
      <div v-if="showDepositDialog" class="dialog-overlay">
        <div class="dialog-content">
          <h3 class="dialog-title">充值金额</h3>
          <input
              type="number"
              v-model="depositAmount"
              placeholder="输入充值金额"
              class="dialog-input"
          >
          <div class="dialog-actions">
            <button class="confirm-btn" @click="deposit">确认充值</button>
            <button class="cancel-btn" @click="showDepositDialog = false">取消</button>
          </div>
        </div>
      </div>

      <!-- 提现弹窗 -->
      <div v-if="showWithdrawDialog" class="dialog-overlay">
        <div class="dialog-content">
          <h3 class="dialog-title">提现金额</h3>
          <input
              type="number"
              min="1"
              step="0.01"
              v-model="withdrawAmount"
              placeholder="输入提现金额"
              class="dialog-input"
          >
          <div class="dialog-actions">
            <button class="confirm-btn" @click="withdraw">确认提现</button>
            <button class="cancel-btn" @click="showWithdrawDialog = false">取消</button>
          </div>
        </div>
      </div>

      <!-- 转账弹窗 -->
      <div v-if="showTransferDialog" class="dialog-overlay">
        <div class="dialog-content">
          <h3 class="dialog-title">转账信息</h3>
          <input
              type="text"
              v-model="transferToUserId"
              placeholder="输入收款人ID"
              class="dialog-input"
          >
          <input
              type="number"
              v-model="transferAmount"
              placeholder="输入转账金额"
              class="dialog-input"
          >
          <div class="dialog-actions">
            <button class="confirm-btn" @click="transfer">确认转账</button>
            <button class="cancel-btn" @click="showTransferDialog = false">取消</button>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部导航 -->
    <Footer />
  </div>
</template>

<script>
import { ref, onMounted ,computed} from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import Footer from '../components/Footer.vue'

export default {
  name: 'Wallet',
  components: { Footer },
  setup() {
    const router = useRouter();
    const user = JSON.parse(sessionStorage.getItem('user') || '{}');
    const userId = ref(user.userId || null);

    // 响应式数据
    const balance = ref(0);
    const showDepositDialog = ref(false);
    const showWithdrawDialog = ref(false);
    const showTransferDialog = ref(false);
    const depositAmount = ref(null);
    const withdrawAmount = ref(null);
    const transferAmount = ref(null);
    const transferToUserId = ref('');

    // 初始化加载钱包数据
    const loadWalletData = async () => {
      if (!userId.value) {
        console.error('userId is undefined or null');
        return;
      }

      try {
        const balanceRes = await axios.get(`/WalletController/getBalance/${userId.value}`);
        balance.value = balanceRes.data.result.balance;
      } catch (error) {
        console.error('数据加载失败:', error);
      }
    };

    // 充值操作
    const deposit = async () => {
      if (!userId.value || !depositAmount.value) {
        alert('请输入正确的充值金额');
        return;
      }

      try {
        const response = await axios.post(`/WalletController/recharge/${userId.value}/${depositAmount.value}`);
        alert(response.data.message);
        showDepositDialog.value = false;
        await loadWalletData();
      } catch (error) {
        alert(error.response?.data.message || '充值失败');
      }
    };
    const formattedBalance = computed(() => {
      const num = Number(balance.value)
      return isNaN(num) ? '0.00' : num.toFixed(2)
    })
    // 提现操作
    const withdraw = async () => {
      if (!userId.value || !withdrawAmount.value) {
        alert('请输入正确的提现金额');
        return;
      }

      try {
        const response = await axios.post(`/WalletController/withdraw/${userId.value}/${withdrawAmount.value}`);
        alert(response.data.message);
        showWithdrawDialog.value = false;
        await loadWalletData();
      } catch (error) {
        alert(error.response?.data.message || '提现失败');
      }
    };

    // 转账操作
    const transfer = async () => {
      if (!userId.value || !transferToUserId.value || !transferAmount.value) {
        alert('请填写完整的转账信息');
        return;
      }

      try {
        const url = `/WalletController/transfer/${userId.value}/${transferToUserId.value}/${transferAmount.value}`;
        const response = await axios.post(url);
        alert(response.data.message);
        showTransferDialog.value = false;
        await loadWalletData();
      } catch (error) {
        alert(error.response?.data.message || '转账失败');
      }
    };

    // 生命周期钩子
    onMounted(loadWalletData);

    return {
      balance,
      showDepositDialog,
      showWithdrawDialog,
      showTransferDialog,
      depositAmount,
      withdrawAmount,
      transferAmount,
      transferToUserId,
      deposit,
      withdraw,
      transfer,
      formattedBalance,
      back: () => router.go(-1)
    };
  }

}
</script>

<style scoped>
/* 增强型Header样式 */
.enhanced-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}

.fa-arrow-left {
  font-size: 2rem !important;
  color: #007bff;
}

.back-text {
  font-size: 1.2rem;
  color: #007bff;
}

.header-title {
  margin-left: 2rem;
  font-size: 1.8rem;
  color: #333;
}

/* 余额卡片 */
.balance-card {
  background: linear-gradient(135deg, #007bff, #00bfff);
  padding: 2rem;
  border-radius: 16px;
  margin: 2rem;
  color: white;
}

.balance-label {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.balance-amount {
  display: flex;
  align-items: baseline;
}

.currency {
  font-size: 2.5rem;
  margin-right: 0.5rem;
}

.amount {
  font-size: 3.5rem;
  font-weight: 700;
}

/* 操作按钮组 */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem;
}

.action-btn {
  padding: 1.5rem;
  border-radius: 12px;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.action-btn i {
  font-size: 2rem !important;
}

.deposit {
  background: #28a745;
  color: white;
}

.withdraw {
  background: #17a2b8;
  color: white;
}

.transfer {
  background: #ffc107;
  color: black;
}

/* 信用信息面板 */
.credit-panel {
  background: white;
  border-radius: 16px;
  margin: 2rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 0;
  font-size: 1.2rem;
}

.info-label {
  color: #666;
}

.info-value {
  font-weight: 600;
  color: #333;
}

.info-divider {
  height: 1px;
  background: #eee;
  margin: 0.5rem 0;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-content {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  width: 90%;
  max-width: 300px;
}

.dialog-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.dialog-input {
  width: 90%;
  padding: 1.2rem;
  font-size: 1.2rem;
  border: 2px solid #007bff;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.dialog-actions {
  display: flex;
  gap: 1rem;
}

.confirm-btn, .cancel-btn {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
}

.confirm-btn {
  background: #007bff;
  color: white;
}

.cancel-btn {
  background: #eee;
  color: #666;
}
</style>